@extends('admin.layout.layout')
@section('content')



@component('admin.components.content.formContent')
@slot('rightContent')
<form class="form-material mini-form ajaxForm" method="POST" @if(isset($editData)) action="{{url('/admin/shape',['id'=>$editData->id])}}" @else action="{{url('/admin/shape')}}" @endif)>
    @isset($editData)
        @method('PUT')
    @endisset
    @csrf
    <div class="body">
        @component('admin.components.input',[
            'min'=>'3',
            'title'=>'形状名称',
            'name'=>'shape_name',
            'default'=>isset($editData)?$editData->shape_name:''
            ])
        @endcomponent

        <h5>选择默认字段</h5>
        <input type="hidden" name="default_ids" id="default-ids" value="{{isset($editData)?$editData->default_ids:''}}">
        <ul class="row default-list">
            @forelse ($defaultFields as $item)
                <li class="col-md-2 mt-2">
                    <div class="custom-control custom-checkbox">
                            <input type="checkbox" id="checkbox{{$item->id}}" class="custom-control-input  table-checkbox"
                             @if(isset($editData)&&in_array($item->id,explode(',',$editData->default_ids))) checked @endif
                             >
                            <label class="custom-control-label" for="checkbox{{$item->id}}">
                                    {{$item->field_title}} -- {{$item->field_type}}  
                            </label>
                    </div>
         
                </li>
            @empty
                <h3>没有更多了</h3> 
            @endforelse
        </ul>
        <hr>
        <h5>自定义字段列表</h5>
        <input type="hidden" name="custom_arr" id="custom_arr">

        <div class="custom-list mb-4">
            @isset($editData)
                @foreach ($editData->custom_items as $item)
                    <div class="d-flex mt-2" id="custom{{$item->id}}">
                            <input type="text" class="form-control col-md-4 field-title" placeholder="输入字段标题名称" value="{{$item->field_title}}">
                    <input type="text" class="form-control col-md-4 field-name" placeholder="输入字段Name" value="{{$item->field_name}}">
                    <select class="form-control col-md-2 field-type">
                            @foreach ($fieldTypes as $itemm)
                                    <option value="{{$itemm}}" @if($itemm==$item->field_type) selected @endif>{{$itemm}}</option>
                            @endforeach
                    </select>
                     <input type="button" class="btn btn-danger col-md-2 deleteItem" value="删除">
                    </div>
                @endforeach 
            @endisset
          
        </div>
        <hr>
        <h6 class="mt-4">新建自定义字段</h6>
        <div class="d-flex mt-2 mb-4">
            <input type="text" class="form-control col-md-4" placeholder="输入字段标题名称" id="add-title">
            <input type="text" class="form-control col-md-4" placeholder="输入字段Name" id="add-name">
            <select class="form-control col-md-2" id="add-type">
                @foreach ($fieldTypes as $item)
                        <option value="{{$item}}">{{$item}}</option>
                @endforeach
            </select>
            <input type="button" class="btn btn-primary col-md-2" value="添加" id="add-field">
        </div>

    </div>
    <hr>

    <button type="submit" class="btn btn-primary mt-2"><i class="icon-arrow_forward mr-2"></i>提交</button>
</form>

<script>
    //监听自定义字段变化
    getInputChange();

    function getInputChange(){
        var customs=[];
        $(".custom-list>div").each(function(){
            var field_name=$(this).find(".field-name").val();
            var field_title=$(this).find(".field-title").val();
            var field_type=$(this).find(".field-type").val();
            var id=$(this).attr('id');
            if(field_title&&field_name&&field_type){
                var items={
                    field_title:field_title,
                    field_name:field_name,
                    field_type:field_type,
                };
                if(id){
                    items.id=id.replace('custom','');
                }
                customs.push(items);
            }
        });
        $("#custom_arr").val(JSON.stringify(customs));
    }

    $(document).on('input','.custom-list input,.custom-list select',function(){
        getInputChange();
    });

    //监听默认字段变化

    $(".default-list input").change(function(){
        var checkedArr=[];
        $(".default-list input:checked").each(function(){
            checkedArr.push($(this).attr('id').replace('checkbox',''));
        });
        $("#default-ids").val(checkedArr);
    });
    
    //添加自定义字段
    $("#add-field").click(function(){
        var name=$("#add-name").val();
        var title=$("#add-title").val();
        var type=$("#add-type").val();
        //验证是否有重名
        var invalid=false;
        $(".custom-list input[type='text']").each(function(){
            var val=$(this).val();
            if(val===name||val===title){
                invalid=true;
            }
        });
        if(invalid){
            toastr.info('标题名称，字段Name，必须唯一,不可重复');
            return false;
        }
        if(!name||!title){
            toastr.info('标题名称，字段Name，不能为空');
            return false;
        }
        var options=@JSON($fieldTypes);
        var optionsHTML=""
        options.forEach(function(v){
                optionsHTML+="<option "+(v===type?'selected':'')+">"+v+"</option>";
        });

        $html='<div class="d-flex mt-2">'+
                        '<input type="text" class="form-control col-md-4 field-title" placeholder="输入字段标题名称" value="'+title+'">'+
                        '<input type="text" class="form-control col-md-4 field-name" placeholder="输入字段Name" value="'+name+'">'+
                        '<select class="form-control col-md-2 field-type">'+optionsHTML+'</select>'+
                        '<input type="button" class="btn btn-danger col-md-2 deleteItem" value="删除">'+
                '</div>';
        $(".custom-list").append($html);
        $("#add-name").val("");
        $("#add-title").val("");
        getInputChange();
    });

    $(document).on('click','.deleteItem',function(){
        $(this).parents('.d-flex').remove();
        getInputChange();
    });
</script>
@endslot
@endcomponent


 
@endsection